<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>

<form action="" method="get">
  <table class="table table-striped table-bordered">

    <thead>
      <tr>
        <th colspan="2">Please fill the details below..</th>
      </tr>
    </thead>

    <tbody>

      <tr>
        <td align="right">Name :</td>
        <td >
<input
type="text"
name="uname"
value=""
id="unameId"
required
placeholder="My Name is..." />
        </td>
      </tr>

      <tr>
        <td align="right">Email :</td>
        <td >
<input type="email"
       name="email"
       value=""
       id="emailId"
       required
       placeholder="My email is..." />        </td>
      </tr>

      <tr>
        <td align="right">Password :</td>
        <td >
<input type="password"
       name="password"
       value=""
       required
       placeholder="My password is..." />        </td>
      </tr>

      <tr>
        <td align="right">Gender :</td>
        <td >
<label><input type="radio"
       name="gender"
       required /> Male</label>
<label><input type="radio"
       name="gender"
       required /> Female</label>
        </td>
      </tr>

      <tr>
        <td align="right">Date Of Birth :</td>
        <td >
<input type="date"
       name="dob"
       value=""
       required
       placeholder="My DOB is..." />        </td>
      </tr>

      <tr>
        <td align="right">Upload Avatar :</td>
        <td >
<input type="file"
       name="avatar"
       value=""
       required
       placeholder="My avatar is..." />       </td>
      </tr>


      <tr>
        <td align="right">Add Fav Number :</td>
        <td >
<input type="number"
       name="number"
       value=""
       required />      </td>
      </tr>

      <tr>
        <td align="right">Add Fav Color :</td>
        <td >
<input type="color"
       name="uColor"
       value=""
       required />
      </td>
      </tr>

      <tr>
        <td align="right">Add Fav Month :</td>
        <td >
<input type="month"
       name="uMonth"
       value=""
       required />
          </td>
      </tr>

      <tr>
        <td align="right">Address :</td>
        <td >
<textarea name="address"
          placeholder="My address is"
          required
></textarea>
          </td>
      </tr>

      <tr>
        <td align="right">Country :</td>
        <td >
<select name="country" >
  <option value="">India</option>
  <option value="">Pak</option>
  <option value="">Nepal</option>
  <option value="">Srilanka</option>
  <option value="">Bhutan</option>
  <option value="">China</option>
</select>          </td>
      </tr>

      <tr>
        <td align="right">Add 2 Country :</td>
        <td >
<select multiple name="country" >
  <option value="">India</option>
  <option value="">Pak</option>
  <option value="">Nepal</option>
  <option value="">Srilanka</option>
  <option value="">Bhutan</option>
  <option value="">China</option>
</select>
          </td>
      </tr>

      <tr>
        <td align="right">Add 2 Country :</td>
        <td >
  <input type="text" name="country" list="country_id" placeholder="Type Country Frist Letter">
  <datalist id="country_id">
    <option value="in">India</option>
    <option value="pk">Pakistan</option>
    <option value="np">Nepal</option>
    <option value="sl">SriLanka</option>
    <option value="bh">Bhutan</option>
    <option value="ch">China</option>
  </datalist>
          </td>
      </tr>

      <tr>
        <td align="right">&nbsp;</td>
        <td >
<label><input type="checkbox"
       name="agree"
       required /> Are you agree ?</label></td>
      </tr>

      <tr>
        <td align="right">&nbsp;</td>
        <td >

<button class="btn btn-large btn-success ">I am done!!<i class="icon-ok icon-2x"></i></button>
        </td>
      </tr>

    </tbody>

  </table>
</form>


</body>
</html>
